<template>
  <v-container>
    <div class="pt-5">
      <span class="display-1 font-weight-bold">友链</span>
    </div>
    <v-row class="mb-6 mt-6">
      <v-col cols="12" class="hidden-md-and-up">
        <template>
          <v-card class="mx-auto">
            <v-list>
              <v-list-group>
                <template v-slot:activator>
                  <v-list-item-title>
                    <div>
                      <v-list-item class="py-0">
                        <v-list-item-avatar>
                          <v-img :src="creater.icon"></v-img>
                        </v-list-item-avatar>
                        {{ creater.name }}
                      </v-list-item>
                    </div>
                  </v-list-item-title>
                </template>
                <v-list-item v-for="(creater, i) in createrList" :key="i">
                  <div style="width:100%;">
                    <v-card class="mt-4">
                      <v-list-item class="py-0">
                        <v-list-item-avatar
                          @click="
                            $router.push(
                              `/creater/${creater.fields.follow_name[0]}`
                            )
                          "
                        >
                          <v-img :src="creater.fields.follow_name[1]"></v-img>
                        </v-list-item-avatar>
                        <v-list-item-title>
                          {{ creater.fields.follow_name[0] }}
                        </v-list-item-title>
                      </v-list-item>
                    </v-card>
                  </div>
                </v-list-item>
              </v-list-group>
            </v-list>
          </v-card>
        </template>
      </v-col>
      <v-col cols="12" md="3" class="hidden-sm-and-down">
        <div v-for="(creater, i) in createrList" :key="i">
          <v-card class=" mt-4">
            <v-list-item class="py-0">
              <v-list-item-avatar
                @click="
                  $router.push(`/creater/${creater.fields.follow_name[0]}`)
                "
                style="cursor:pointer;"
              >
                <v-img :src="creater.fields.follow_name[1]"></v-img>
              </v-list-item-avatar>
              {{ creater.fields.follow_name[0] }}
            </v-list-item>
          </v-card>
        </div>
      </v-col>
      <v-col cols="12" md="9">
        <div>
          <v-row>
            <v-col
              v-for="article in articles"
              :key="article.pk"
              cols="12"
              md="6"
              class="mt-1"
            >
              <div>
                <v-card
                  height="346"
                  class="mx-auto"
                  @click="fetchDet(article.pk)"
                >
                  <v-img :src="article.fields.cover_image" height="194"></v-img>
                  <v-list-item>
                    <v-list-item-avatar
                      @click="
                        $router.push(`/creater/${article.fields.name[0]}`)
                      "
                    >
                      <v-img
                        class="elevation-6"
                        :src="article.fields.name[1]"
                      ></v-img>
                    </v-list-item-avatar>
                    <v-list-item-content>
                      <v-list-item-title class="headline">{{
                        article.fields.title
                      }}</v-list-item-title>
                      <v-list-item-subtitle>{{
                        article.fields.name[0]
                      }}</v-list-item-subtitle>
                    </v-list-item-content>
                    <v-btn color="primary">{{ article.fields.category }}</v-btn>
                  </v-list-item>

                  <v-card-text
                  >
                  {{replace(article.fields.content.slice(0, 42))+'...'}}
                  </v-card-text>
                </v-card>
              </div>
            </v-col>
          </v-row>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      createrList: [],
      articles: [],
      page: 1,
      no_more: false,
      flag: false, 
      creater: {
        icon: require("@/assets/bar/all@2x.png"),
        name: "关注列表"
      }
    };
  },
  created() {
    this.fetchFollow();
    this.fetch();
    window.addEventListener("scroll", this.scrollHandle, true);
  },
  methods: {
    async fetchFollow() {
      try {
        const res = await this.$http.get(
          `follow_list/?name=${localStorage.getItem("name")}`
        );
        this.createrList = res.data.list;
        this.createrList.forEach(creater => {
          creater.fields.follow_name[1] = require(creater.fields
            .follow_name[1]);
        });
      } catch (e) {
        console.log("图片获取失败");
      }
    },
    more() {
      this.page++;
      this.fetch();
    },
    async fetch() {
      try {
        const res = await this.$http.get(
          `follow_article/?name=${localStorage.getItem("name")}&page=${
            this.page
          }`
        );
        if (res.data.error_num === 1) {
          this.no_more = true;
        }
        this.articles = [...this.articles, ...res.data.list];
        this.articles.forEach(art => {
          art.fields.cover_image = require(art.fields.cover_image);
          art.fields.name[1] = require(art.fields.name[1]);
        });
      } catch (e) {
        console.log("图片获取失败");
      }
    },
    replace(str){
      let con = str.replace(/\s*/g, "");  //去掉空格
      let res =con.replace(/<[^>]+>/g, ""); //去掉所有的html标记
      let res1 = res.replace(/↵/g, "");     //去掉所有的↵符号
      let res2 = res1.replace(/[\r\n]/g, "") //去掉回车换行
      return res2
    },
    scrollHandle() {
      // console.log(this.no_more)
      // console.log(this.flag)
      // 获取页面页面的滚动高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 获取页面滚动距离顶部的高度,  window.pageYOffse 兼容苹果
      let scrollTop =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      // 获取页面的可视高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // console.log(scrollHeight);
      // console.log(scrollTop);
      // console.log(clientHeight);
      if (scrollTop + clientHeight >= scrollHeight - 20) {
        // 距离底部还有20的时候执行数据加载
        if (this.flag) return 
					this.flag = true
        if (!this.no_more) {
          console.log("加载数据");
          this.more();
          this.flag = false
        }
      }
    },
    fetchDet(id) {
      this.$router.push(`/article/${id}`);
    }
  },
  destroyed() {
    // 页面卸载时移除监听事件
    window.removeEventListener("scroll", this.scrollHandle, true);
    console.log('卸载滚动事件')
  }
};
</script>

<style></style>
